<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link href="/test.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="/images/GvaScript.css" rel="stylesheet" type="text/css" media="screen"/><html>
  <script src="../../../lib/prototype.js"></script>
  <script src="../../../lib/GvaScript.js"></script>
  
  <style type="text/css">
  .blue * {background-color: aqua;}
  </style>

  <title>GvaScript Grid</title>
</head>

  <body>
      <h1>Paginated Grid</h1>

      <p>
      This grid example is bound to a complete list of countries
      served by the perl HTTP service at http://localhost:8081/g/country/ that responds 
      by an object: <tt>{liste: [{value: ..., code: ...}, ... ], total: xxx}</tt>
      </p>
      
      <br/> 
      <form onsubmit="setup($F('countries_prefix')); return false;">
        <input type="text" id="countries_prefix" />
        <input type="submit" value="Go!" />
      </form>
      <br/>
      
      <div id="wrapper" style="height:500px">
        <div id="grid_container" tabIndex="0"></div>
        <div id="toolbar_container" style="height:28px"></div>
      </div>

  </body> 

  <script type="text/javascript">
    var url = "http://localhost:8081/g/country/";
   
    function setup(prefix) {
      prefix = prefix || '';  
      new GvaScript.Grid("my_grid", url+prefix, {
          grid_container: 'grid_container',
          toolbar_container: 'toolbar_container',
          columns: [
              {label: 'Country',      value: function(e) {return '['+e.code+']'}},
              {label: 'Country Code', value: 'value'}
          ],
          actions: [
            {
              id: 'blue_button',
              label:'I\'m blue', 
              condition: function() {return true;}, 
              callback: function() {
                GvaScript.Grids.get('my_grid').grid_container.addClassName('blue');
                $('blue_button').hide();
                $('not_blue_button').show();
              }
            },
            {
              id: 'not_blue_button',
              label:'No I\'m not', 
              style: {display: 'none'},
              callback: function() {
                GvaScript.Grids.get('my_grid').grid_container.removeClassName('blue');
                $('blue_button').show();
                $('not_blue_button').hide();
              }
            },
            {
              label:'Erase Grid', 
              callback: function() {
                GvaScript.Grids.get('my_grid').clear('starting from scratch');
              }
            },
            {label:'CONDITION FALSE', condition: false}
          ],
          onEmpty: function() { this.clearResult('huh no word!'); },        
          onPing: function(target) { alert('Ping\n'+$H(target).inspect()); }, 
          onCancel: function() {GvaScript.Grids.get('my_grid').clear('starting from scratch');}
      });
   }
   setup();
  </script>

</html>
